<template>
    <div class="hello">

        <el-button type="success" size="mini" icon="el-icon-circle-plus" @click="hanldeAdd()">添加</el-button>
        <el-table
            :data="tableData"
            style="width: 100%"
            >
            <el-table-column
            prop="nickName"
            label="昵称"
            width="180">
            </el-table-column>
            <el-table-column
            prop="mobile"
            label="手机号"
            width="180">
            </el-table-column>
            <el-table-column
            label="角色">
                <template slot-scope="scope">
                    <template v-for="role in roleList">
                        <template v-if="role.id == scope.row.roleId">
                            {{role.roleName}}
                        </template>
                    </template>
                </template>
            </el-table-column>

            <el-table-column
            label="状态">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.enable" @change="changeHandle(scope.row)"></el-switch>
                </template>
            </el-table-column>



            <el-table-column
            label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            icon="el-icon-edit"
                            type="primary"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                        size="mini"
                        icon="el-icon-delete"
                        type="danger"
                        @click="handlerDelet(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
        background
        layout="total,prev, pager, next,jumper,sizes"
        @current-change="handleSizeChange"
        @size-change="handleCurrentChange"
        :current-page="page"
        :page-size="rows"
        :page-sizes="[5,10,20,50,100,200,500]"
        :total="total">
        </el-pagination>




        <!--  弹出框处理 -->
  <el-dialog
  :title="title"
  :visible.sync="dialogVisible"
  width="40%"
  >

    <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="昵称">
                <el-input v-model="form.nickName"></el-input>
        </el-form-item>
        <el-form-item label="手机">
                <el-input v-model="form.mobile"></el-input>
        </el-form-item>
        <el-form-item label="密码">
                <el-input type="password" autocomplete="off" show-password v-model="form.pwd"></el-input>
        </el-form-item>

        <el-form-item label="角色">
            <el-select v-model="form.roleId" placeholder="请选择">
                <el-option
                v-for="item in roleList"
                :key="item.id"
                :label="item.roleName"
                :value="item.id">
                </el-option>
             </el-select>
        </el-form-item>
        <el-form-item label="状态">
               <el-switch v-model="form.enable"></el-switch>
        </el-form-item>
    </el-form>
    

  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false;handleOk()">确 定</el-button>
  </span>
</el-dialog>

    </div>
  </template>
  
  <script>
  export default {
    name: 'User',
    data(){
        return{
            tableData:[],
            form:{
                id:0,
                nickName:'',
                mobile:'',
                pwd:'',
                enable:true,
                roleId:0,
            },
            page:1,
            rows:10,
            total:0,
            dialogVisible:false,
            title:'添加用户',
            roleList:[],
        }
    },
    created(){
        this.loadUser();
        this.listAllRole();
        
    },
    methods:{
        listAllRole(){
            this.api.loadAllRole().then((res)=>{
                this.roleList=res.data;
            });
        },
        handleSizeChange(val){
            this.page=val;
            this.loadUser();
        },
        handleCurrentChange(val){
            this.rows=val;
            this.loadUser();
        },
        changeHandle(row){
            var id=row.id;
            var enable=row.enable;
            var result="id="+id+"&enable="+enable;
            this.api.addUser(result).then((res)=>{
                if(res.code==0){
                    this.$message({
                        type: 'success',
                        message: '操作成功!'
                    });
                }else{
                    this.$message({
                        type: 'error',
                        message: res.message
                    });
                }
                this.loadUser();
            });
        },
        handleOk(){
            var param=this.form;
            var result="";
            for(var name in param){
                if(!(name=="id"&&param[name]==0)){
                    if(param[name]!=undefined){
                        result+=name+"="+param[name]+"&";
                    }
                }
            }
            this.api.addUser(result).then((res)=>{
                if(res.code==0){
                    this.$message({
                        type: 'success',
                        message: '操作成功!'
                    });
                }else{
                    this.$message({
                        type: 'error',
                        message: res.message
                    });
                }
                this.loadUser();
            })

        },
        hanldeAdd(){
           this.title="添加用户"; 
           this.dialogVisible=true;
           this.form.id=0;
           this.form,roleId=0;
           this.form.mobile="";
           this.form.nickName="";
           this.form.pwd="";
           this.form.enable=true;

        },
        handlerDelet(id){
            this.$confirm("确定删除该用户？","提示",{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'error'
            }).then(()=>{
                this.api.deleteUser(id).then((res)=>{
                    if(res.code==0){
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }else{
                        this.$message({
                            type: 'error',
                            message: res.message
                        });
                    }
                    this.loadUser();
                });
            }).catch(()=>{
                // this.$message({
                //     type: 'info',
                //     message: '已取消删除'
                // });          
            });

        },
        handleEdit(index,row){
           this.title="编辑用户"; 
           this.dialogVisible=true;
           this.form.id=row.id;
           this.form.mobile=row.mobile;
           this.form.nickName=row.nickName;
           this.form.pwd=row.pwd;
           this.form.enable=row.enable;
           this.form.roleId=row.roleId;
        },
        loadUser(){
            this.api.loadUser("page="+this.page+"&rows="+this.rows).then((res)=>{
                if(res.code==0){
                    this.tableData=res.data;
                    this.total=res.total;
                }
            });
        }
    },
  }
  </script>
  <style scoped>
  h3 {
    margin: 40px 0 0;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }
  </style>
  